import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import SafeTabBarWrapper from '../components/SafeTabBarWrapper';
import { useUser } from '../context/UserContext';
import { ToastManager } from '../components/Toast';
import { COLORS, SHADOWS } from '../styles/constants';

export default function AccountSecurityScreen({ navigation }) {
  const { isLoggedIn, user, logout } = useUser();

  const handleSwitchAccount = async () => {
    if (isLoggedIn) {
      try {
        await logout();
        ToastManager.success('已退出当前账号，请重新登录');
        navigation.reset({
          index: 0,
          routes: [
            {
              name: 'Main',
              state: { index: 1, routes: [{ name: 'Profile' }] },
            },
          ],
        });
      } catch (error) {
        ToastManager.error('退出失败，请稍后再试');
        return;
      }
    }
    navigation.reset({
      index: 0,
      routes: [
        { name: 'Main', state: { index: 1, routes: [{ name: 'Profile' }] } },
      ],
    });
    navigation.navigate('Login');
  };

  return (
    <SafeTabBarWrapper style={{ backgroundColor: COLORS.background.secondary }}>
      <View style={styles.container}>
        {!isLoggedIn && (
          <View style={styles.noticeCard}>
            <Text style={styles.noticeTitle}>未登录游客</Text>
            <Text style={styles.noticeText}>
              登录后可以查看账号信息，或直接切换账号。
            </Text>
          </View>
        )}

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>账户信息</Text>
          <View style={styles.card}>
            <View style={styles.infoRow}>
              <Text style={styles.infoLabel}>用户ID</Text>
              <Text style={styles.infoValue}>
                {isLoggedIn ? user?.id || '-' : '未登录'}
              </Text>
            </View>
            <View style={[styles.infoRow, styles.infoRowBorder]}>
              <Text style={styles.infoLabel}>手机号</Text>
              <Text style={styles.infoValue}>
                {isLoggedIn ? user?.tel || user?.phone || '未绑定' : '未登录'}
              </Text>
            </View>
            <View style={[styles.infoRow, styles.infoRowBorder]}>
              <Text style={styles.infoLabel}>昵称</Text>
              <Text style={styles.infoValue}>
                {isLoggedIn ? user?.nickname || '未设置' : '未登录'}
              </Text>
            </View>
            <View style={[styles.infoRow, styles.infoRowBorder]}>
              <Text style={styles.infoLabel}>上次登录</Text>
              <Text style={styles.infoValue}>
                {isLoggedIn ? user?.lastLoginTime || '-' : '未登录'}
              </Text>
            </View>
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>账号操作</Text>
          <View style={styles.card}>
            <TouchableOpacity
              style={styles.switchButton}
              onPress={handleSwitchAccount}
              activeOpacity={0.8}
            >
              <Text style={styles.switchButtonText}>
                {isLoggedIn ? '切换账号' : '前往登录'}
              </Text>
            </TouchableOpacity>
            <Text style={styles.switchHint}>
              切换账号不会清除历史数据，如需注销请联系客服。
            </Text>
          </View>
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>账号保护提示</Text>
          <View style={styles.tipsCard}>
            <Text style={styles.tipText}>• 请妥善保管验证码，避免泄露</Text>
            <Text style={styles.tipText}>
              • 如有账号异常，可随时切换或联系客服
            </Text>
            <Text style={styles.tipText}>
              • 切换账号后仍可返回并重新登录原账号
            </Text>
          </View>
        </View>
      </View>
    </SafeTabBarWrapper>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 16,
    paddingTop: 20,
  },
  noticeCard: {
    backgroundColor: COLORS.primaryLight,
    borderRadius: 16,
    padding: 16,
    marginBottom: 16,
  },
  noticeTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: COLORS.primary,
    marginBottom: 6,
  },
  noticeText: {
    fontSize: 13,
    color: COLORS.text.secondary,
    lineHeight: 20,
  },
  section: {
    marginTop: 20,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: COLORS.text.primary,
    marginBottom: 12,
  },
  card: {
    borderRadius: 16,
    backgroundColor: COLORS.background.card,
    paddingHorizontal: 16,
    paddingVertical: 12,
    ...SHADOWS.sm,
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 12,
  },
  infoRowBorder: {
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: COLORS.border.light,
  },
  infoLabel: {
    fontSize: 14,
    color: COLORS.text.tertiary,
  },
  infoValue: {
    fontSize: 14,
    color: COLORS.text.primary,
    fontWeight: '500',
  },
  switchButton: {
    borderRadius: 20,
    backgroundColor: COLORS.primary,
    paddingVertical: 14,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 4,
  },
  switchButtonText: {
    fontSize: 16,
    fontWeight: '600',
    color: COLORS.white,
  },
  switchHint: {
    marginTop: 12,
    fontSize: 12,
    color: COLORS.text.quaternary,
    lineHeight: 18,
  },
  tipsCard: {
    borderRadius: 16,
    backgroundColor: COLORS.background.secondary,
    paddingVertical: 16,
    paddingHorizontal: 14,
  },
  tipText: {
    fontSize: 13,
    color: COLORS.text.secondary,
    marginBottom: 6,
  },
});
